<!DOCTYPE html>
<html>
<head>
    <div class="wx_pic" style="margin:0 auto;display: none;">
        <img src="i/300.jpg" alt="">
    </div>
    <meta charset="utf-8" />
    <title>520来啦，测一测你爱谁？</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style type="css/text">
        *{
            box-sizing: border-box;
        }
        html,body{
            width:100%;
            height:100%;
            overflow: hidden;
        }
        body{
            margin:0;
            padding:0;
            background:#ef94ac; /* 设置游戏背景为粉色*/
            position: relative;
        }
        #loading{
            position:fixed;
            width: 100%;
            height:100%;
            z-index: 100;
            background:#ef94ac;
            font-size:0;
        }
        #loading::after{
            content: '';
            /*设置背景位图及大小*/
            background:url("i/loading.png") no-repeat;
            background-size: cover;
            width:100px;
            height:100px;
            /* 设置位图在屏幕中央显示*/
            position:absolute;
            left:50%;
            top:50%;
            transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
        }
        #scene1{
            left:0;
        }
        #scene2{
            left:100%;
        }
        #scene3{
            left:100%;
            background:url(i/result.jpg) no-repeat 50% 50%;
            background-size: cover;
        }
        #scene1,#scene2,#scene3{
            /* 设置宽度和高度，使三个界面都充满屏幕*/
            width:100%;
            height:100%;
            position:absolute
        }
        .slogan-img{
            opacity:0;
            font-size:0;
            position:absolute;
            left:50%;
            transform:translateX(-50%);
            -webkit-transform:translateX(-50%);
        }
        .slogan-text{
            
            opacity: 0;
            position:absolute;
            color:#fff;
            font-size:12px;
            text-align:center;
        }
        #heart{
            top:15%;
            background:url(i/heart.png) no-repeat 0 0;
            background-size:cover;
            width:122px;
            height:98px;
        }
        #t0{
            top:50%;
            background:url(i/1.png) no-repeat;
            background-size: cover;
            width:132px;
            height: 61px;
        }
        #t1{
            top:65%;
            background:url(i/2.png) no-repeat;
            background-size:cover;
            width:220px;
            height:20px;
        }
        #t2{
            top:73%;
            background:url(i/3.png) no-repeat;
            background-size:cover;
            width:202px;
            height:41px;
        }
        #sbtn{
            top:80%;
            background:url(i/start.png) no-repeat;
            background-size: cover;
            width:240px;
            height:79px;
        }
        #t3{
            top:15px;
            position:absolute;
            width:100%;
        }
        #lbtn{
            top:110%;
            background:url(i/show.png) no-repeat;
            background-size:cover;
            width:240px;
            height:56px;
        }
        #t4{
            top:40%;
            background:url(i/4.png) no-repeat;
            background-size:cover;
            width:156px;
            height:52px;
        }
        #t5{
            top:53%;
            background:url(i/5.png) no-repeat;
            background-size:cover;
            width:160px;
            height:22px;
        }
        #t6{
            top:60%;
            background:url(i/6.png) no-repeat;
            background-size:cover;
            width:166px;
            height:40px;
        }
        #t7{
            top: 115%;
            position:absolute;
            width:100%;
        }
        #ercode{
            left:50%;
            top:75%;
            opacity: 0;
            margin-left: -71px;
            position:absolute;
        }
        #musicplayer{
            position: absolute;
            left:0;
            top:0;
            width:100%;
        }
        #musicplayer button{
            position: absolute;
            right:10px;
            top:10px;
            width:30px;
            height:30px;
            border:0;   /* 去除按钮默认自带的边框*/
        }
        #musiccon{
            background:url(i/musicon.png);
            background-size:cover;
        }
        #musicoff{
            background:url(i/musicoff.png);
            background-size:cover;
        }
        .hidden{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 界面DOM结构代码-->
    <!--loading界面-->
    <div class="loading">加载中...</div>
    <!--初始界面-->
    <div class="scene1">
        <div id="heart" class="slogan-img">爱心</div>
        <div id="t0" class="slogan-img">520</div>
        <div id="t1" class="slogan-img">这真是个适合表达爱意的日子</div>
        <div id="t2" class="slogan-img">你爱的是谁？</div>
        <div id="sbtn" class="slogan-img">马上测一测!</div>

    </div>
    <!--交互界面-->
    <div class="scene2">
        <div id="t3" class="slogan-text">请不断单击屏幕，发现你最爱的TA</div>
        <div id="lbtn" class="slogan-img">爱在文经！</div>
    </div>
    <!--结果界面-->
    <div class="scene3">
        <div id="t4" class="slogan-img">wenjing</div>
        <div id="t5" class="slogan-img">文经学子的一生牵绊</div>
        <div id="t6" class="slogan-img">520说爱你</div>
        <div id="t7" class="slogan-text">520，我们的微信服务平台上线啦<br>更多更好的服务等着你！</div>
        <div id="ercode"><img src="i/ercode.png" width="142" height="142" alt="二维码"></div>
    </div>
    <!--音乐控制界面-->
    <div class="musciplayer">
        <button id="musicon" class="hidden"></button>
        <button id="musicoff"></button>
        <audio src="loop.mp3" loop id="music"></audio>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            document.getElementById("loading").style.display = "none";
        };
        var sbtn = document.getElementById("sbtn");
        var lbtn = document.getElementById("lbtn");
        var scene1 = document.getElementById("scene1");
        var scene2 = document.getElementById("scene2");
        var scene3 = document.getElementById("scene3");
        var t0 = document.getElementById("t0");
        var t1 = document.getElementById("t1");
        var t2 = document.getElementById("t2");
        var t3 = document.getElementById("t3");
        var t4 = document.getElementById("t4");
        var t5 = document.getElementById("t5");
        var t6 = document.getElementById("t6");
        var t7 = document.getElementById("t7");
        var ercode = document.getElementById("ercode");
        var heart = document.getElementById("heart");
        var music = document.getElementById("music");
        var musicoff = document.getElementById("musicoff");
        var musiccon = document.getElementById("musiccon");
    </script>
</body>
</html>